import React, { Component } from "react";
import { connect } from "react-redux";
import "./CumulativeIncome.scss";
import MainLayout from "../../../../component/mainLayout/mainLayout";
import { channelCode } from "../../../../config/Config";
import yhTools from "../../../../tools/yh";
import { ThemeLife } from "../../../../tools/theme";
import { ListView, Toast } from "antd-mobile";
import { Tabs } from "antd-mobile";
import * as ReactDOM from "react-dom";

const tabs = [{ title: "派息明细" }, { title: "提前转出利息" }];

class CumulativeIncome extends Component {
	constructor(props) {
		super(props);
		const dataSource = new ListView.DataSource({
			rowHasChanged: (row1, row2) => row1 !== row2
		});
		const dataSource2 = new ListView.DataSource({
			rowHasChanged: (row1, row2) => row1 !== row2
		});
		this.state = {
			loadStatus: "1", // （ '0'：数据加载中，'1'：加载完成，'2'：加载失败）
			type: "1", //类型1-赎回,2收益
			tabBarUnderlineStyle: {},
			dataSource: dataSource,
			dataSource2: dataSource2,
			arrOne: [], //派息明细
			arrTwo: [], //提前转出利息
			arrData: [],
			initData: {
				precditAmt: "",
				accumateInterestAmt: "",
				nextDrawRuleDay: "",
				profitDetails: []
			},
			height: (document.documentElement.clientHeight * 3) / 4,
			pageIndex: 1,
			hasMore: true,
			isLoading: false,
			isLoaded: false
		};
	}

	//初始化数据
	componentDidMount() {
		this.getInitData("2");
		this.tabsChange(null, 0);
	}

	getInitData(type) {
		const hei =
			document.documentElement.clientHeight -
			ReactDOM.findDOMNode(this.lv).parentNode.offsetTop;
		let objs = {
			url: "/fm/financeAccumate",
			params: {
				channelCode: channelCode,
				pageIndex: "1",
				pageSize: "10",
				type: type
			},
			_alertShow: false
		};
		// Toast.loading("加载中...", 100);
		yhTools.request(objs).then(resp => {
			Toast.hide();
			this.setState({
				isLoaded: true,
				hasMore: false
			});
			if (resp.code == "0") {
				this.setState({
					isLoading: false,
					initData: resp.data,
					arrData: resp.data.profitDetails,
					height: hei,
					pageIndex: 1,
					hasMore: true
				});
				if (resp.data.profitDetails.length < 10) {
					this.setState({
						hasMore: false
					});
				}
			} else {
				Toast.info(resp.message, 2);
			}
		});
	}

	onEndReached = () => {
		const hei =
			document.documentElement.clientHeight -
			ReactDOM.findDOMNode(this.lv).parentNode.offsetTop;
		if (
			this.state.isLoading ||
			(this.state.pageIndex === 1 && !this.state.hasMore)
		) {
			return;
		}
		let pageIndex = this.state.pageIndex + 1;
		this.setState({ isLoading: true, hasMore: true, pageIndex: pageIndex });
		let objs = {
			url: "/fm/financeAccumate",
			params: {
				pageIndex: "" + pageIndex,
				channelCode: channelCode,
				pageSize: "10",
				type: this.state.type
			},
			_alertShow: false
		};

		yhTools.request(objs).then(res => {
			this.setState({
				isLoaded: false
			});
			if (res.code === "0") {
				if (res.data.profitDetails.length > 0) {
					this.setState({
						initData: res.data,
						isLoading: false,
						height: hei,
						hasMore: true,
						arrData: this.state.arrData.concat(res.data.profitDetails)
					});
				}
				if (res.data.profitDetails.length < 10) {
					this.setState({
						hasMore: false
					});
				}
			} else {
				Toast.info(res.message, 2);
			}
		});
	};

	render() {
		const headerParams = {
			header: {
				title: "累计收益"
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles,
			loadStatus: this.state.loadStatus // （ '0'：数据加载中，'1'：加载完成，'2'：加载失败）
		};
		const rowOneNode = (rowData, sectionID, rowID) => {
			return (
				<div key={rowID} className="item">
					<div className="t-t t-left">{rowData.tradeTime}</div>
					<div className="t-t t-right">¥{rowData.profitAmout}</div>
				</div>
			);
		};
		const rowTwoNode = (rowData, sectionID, rowID) => {
			return (
				<div key={rowID} className="item">
					<div className="t-t t-left">{rowData.tradeTime}</div>
					<div className="t-t t-center">转出 ¥{rowData.tradeAmount}</div>
					<div className="t-t t-right">¥{rowData.profitAmout}</div>
				</div>
			);
		};
		const { initData, arrData, type, pageIndex } = this.state;
		return (
			<MainLayout pageParams={headerParams}>
				<div className="cumulative-income-page">
					<div className="content">
						<div className="top-div">
							<div className="line-0">
								<div className="title-0">累计收益</div>
								<div className="content-0">{initData.totalProfit}</div>
							</div>
							<div className="line-1">
								<div className="line-1-1">
									<div className="item">
										<div className="item-1 t-c">累计派息</div>
										<div className="item-2 t-c">
											¥ {initData.distributeProfit}
										</div>
									</div>
									<div className="item">
										<div className="item-1 t-c">提前转出利息</div>
										<div className="item-2 t-c">¥ {initData.redeemProfit}</div>
									</div>
								</div>

								{/*<div className="line-1-2">*/}
								{/*<div className="item">每周一凌晨，自动派息至余额账户</div>*/}
								{/*</div>*/}
							</div>
						</div>

						<div className="line-2">
							<Tabs
								tabs={tabs}
								initialPage={0}
								onChange={this.tabsChange.bind(this)}
								swipeable={false}
								animated={false}
								useOnPan={false}
								tabBarActiveTextColor={ThemeLife.switch("#F82633", "#40B15D")}
								tabBarUnderlineStyle={{
									left: "0%!important",
									backgroundColor: ThemeLife.switch("#F82633", "#40B15D")
								}}
							>
								{type == "2" ? (
									<div>
										<ListView
											ref={el => {
												if (el && pageIndex === 1) {
													this.lv = el;
													el.scrollTo(0, 0);
												}
											}}
											dataSource={this.state.dataSource.cloneWithRows(arrData)}
											renderFooter={() => (
												<div className="bill_record_listview_foot">
													{this.state.hasMore ? "加载中" : "没有更多了"}
												</div>
											)}
											onEndReachedThreshold={100}
											renderRow={rowOneNode}
											style={{ height: this.state.height, overflow: "auto" }}
											pageSize={10}
											onEndReached={this.onEndReached}
										/>
									</div>
								) : (
									<div>
										<ListView
											ref={el => {
												if (el && pageIndex === 1) {
													this.lv = el;
													el.scrollTo(0, 0);
												}
											}}
											dataSource={this.state.dataSource2.cloneWithRows(arrData)}
											renderFooter={() => (
												<div className="bill_record_listview_foot">
													{this.state.hasMore ? "加载中" : "没有更多了"}
												</div>
											)}
											onEndReachedThreshold={100}
											renderRow={rowTwoNode}
											style={{ height: this.state.height, overflow: "auto" }}
											pageSize={10}
											onEndReached={this.onEndReached}
										/>
									</div>
								)}
							</Tabs>
						</div>
						{/*<div className="no-more">*/}
						{/*{this.state.hasMore ? '加载中' : '没有更多了'}*/}
						{/*</div>*/}
					</div>
				</div>
			</MainLayout>
		);
	}

	tabsChange(e, i) {
		let temp, type, left;
		if (i === 0) {
			temp = "18%";
			type = "2";
			left = i * 18 + "% +" + ` 0.4rem + ${i * 0.35}rem - 6rem`; //注意：``这里面的空格不可删除,calc计算需要
		} else {
			temp = "25%";
			type = "1";
			left = i * 18 + "% +" + ` 0.4rem + ${i * 0.35}rem - 8.3rem`; //注意：``这里面的空格不可删除,calc计算需要 临时解决熊老板的bug
		}
		this.setState({
			pageIndex: 1, //切换tab时重新加载
			type: type, //加载更多的时候使用该字段
			hasMore: true
		});
		this.getInitData(type);
		left = `calc(${left})`;
		document.getElementsByClassName(
			"am-tabs-default-bar-underline"
		)[0].style.left = left;
		document.getElementsByClassName(
			"am-tabs-default-bar-underline"
		)[0].style.width = temp;
	}
}

function mapStateToProps(state) {
	return state;
}

function mapDispatchToProps() {
	return {};
}

const CumulativeIncomePage = connect(
	mapStateToProps,
	mapDispatchToProps
)(CumulativeIncome);
export default CumulativeIncomePage;
